﻿<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Utility Functions</title>
    <link rel="stylesheet" type="text/css" href="../Content/themes/ui-lightness/jquery-ui-1.8.21.custom.css" />
    <script type="text/javascript" src="../Scripts/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../Scripts/jquery-ui-1.8.22.js"></script>
    <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
    <link rel="stylesheet" type="text/css" href="../Scripts/jQueryExtentions/jquery.treeview.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.97/jsxgraphcore.js"></script>

    <script type="text/javascript">
        var pvMapper = {something:"what"};

    </script>
    <script type="text/javascript" src="../Scripts/pvExtensions/scoreBoard/UtilityFunctions.js"></script>
        <script type="text/javascript">
            $().ready(function () {
                var u = new pvMapper.ScoringUtilities.UtilityFunctionsManager()
                u.init();
            });

    </script>
    <style type="text/css">
        .utilityFunctions input
        {
            width: 25px;
        }

        .utilityFunctions .ui-slider
        {
            width: 200px;
            margin-left: 20px;
            margin-right: 20px;
        }
    </style>

</head>
<body>


    <div class="utilityFunctions">
        <h1>Tool: Site Area Cost</h1>

        <p>Min Value<input id="MinValue" type="text" value="10" /></p>
        <p>
            Target Value<input id="TargetValue" type="text" value="50" />
        </p>
        <p>
            Max Value<input id="MaxValue" type="text" value="100" />
        </p>
        <p>
            Slope Value
        <input id="SlopeValue" type="text" value="50" class="slider" />
        </p>
        <p>
            <select id="FunctionSelector">
                <option value="utilityFunction1">Less is better</option>
                <option value="utilityFunction2">More is better</option>
            </select>
        </p>


    </div>
    <div id="box" class="jxgbox" style="width: 400px; height: 400px;"></div>

</body>
</html>-->
